<template>
  <div class="userEdit">

    <el-dialog :visible.sync="visible">
      <div class="user-page flex flexdc">
        <div class="user-title fs14 cfff flex flexac flexjcsb">
          <div>{{ isEdit ? '修改用户' : '添加用户' }}</div>
          <i class="el-icon-close close" @click="handleCloseDialog" />
        </div>
        <div>
          <div class="user-main flex flexac flexdc m-t-30">
            <el-form ref="form" class="user-form m-t-20 flex flexdc" :model="form" label-width="auto">

              <div class="flex flexac user-input">
                <el-button v-if="isEdit" class="changePass" type="success m-l-20" @click="handleChangePwd"><i class="el-icon-edit" />修改密码</el-button>
              </div>
              <!-- <div class="flex flexac user-input">
                <span class="orgName texttr">用户所属机构：</span>
                <el-input v-model.trim="form.orgName" readonly class="form-input" />
                <el-button v-if="!isEdit" type="warning" class="comp-select m-l-20 m-r-20 iconfont icon-xuanze" @click="handleSelectOrg">选择机构</el-button>
              </div> -->

              <div class="flex">
                <div class="m-r-20">
                  <div class="flex flexac user-input">
                    <span class="name texttr"><span class="mustval">*</span>用户名称：</span>
                    <el-input v-model.trim="form.name" class="form-input" placeholder="请输入真实姓名" />
                  </div>

                  <div class="flex flexac user-input">
                    <span class="name texttr"><span class="mustval">*</span>联系邮箱：</span>
                    <el-input v-model.trim="form.email" class="form-input" placeholder="请输入邮箱号" />
                  </div>

                  <div class="flex flexac user-input">
                    <span class="name texttr"><span class="mustval">*</span>联系手机：</span>
                    <el-input v-model.trim="form.mobile" class="form-input" placeholder="请输入手机号码" />
                  </div>

                  <div class="flex flexac user-input">
                    <span class="name texttr"><span class="mustval">*</span>系统平台：</span>
                    <el-select v-model="form.sysId" class="form-input" placeholder="请选择系统平台">
                      <el-option
                        v-for="item in sysOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </div>
                </div>

                <div v-if="!isEdit" class="m-r-40">
                  <div class="flex flexac user-input">
                    <span class="name texttr"><span class="mustval">*</span>登陆账号：</span>
                    <el-input v-model.trim="form.account" class="form-input" placeholder="请输入登陆账号" />
                  </div>

                  <div class="flex flexac user-input">
                    <span class="name texttr"><span class="mustval">*</span>登陆密码：</span>
                    <el-input v-model.trim="form.pwd" class="form-input" placeholder="请输入登陆密码" />
                  </div>
                  <div class="flex flexac user-input">
                    <span class="name texttr"><span class="mustval">*</span>确认密码：</span>
                    <el-input v-model.trim="checkPass" class="form-input" placeholder="请再次输入密码" />
                  </div>

                </div>

              </div>

              <!-- <div class="flex flexac user-input">
            <div class="upload" style="display: flex">
              <span class="name texttr">个人图像：</span>
              <UploadAvatar :avatar="form.avatarUrl" />
            </div>

          </div> -->
            </el-form>
            <!-- 分割线 -->
            <!-- <el-divider>角色授权</el-divider>

            <div class="user-check">
              <el-checkbox v-model="checkAll" class="m-b-20" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
              <el-checkbox-group v-model="form.roles" class="user-group flex flexwrap flexaifs" @change="handleCheck">
                <el-checkbox v-for="item in form.checkList" :key="item.roleId" class="user-checkbox" :label="item.roleId">{{ item.roleName }}</el-checkbox>
              </el-checkbox-group>
            </div> -->
          </div>
        </div>
        <div class="flex flexac flexcenter m-t-100 m-b-30">
          <el-button v-if="!isEdit" class="saveBtn btn m-r-30 el-icon-circle-check" @click="handleSave(0)">保 存</el-button>
          <el-button v-else class="btn el-icon-circle-check m-r-30" type="success" @click="handleSave(1)">更 新</el-button>
          <el-button class="clsoeBtn btn el-icon-circle-close" @click="handleCloseDialog">关 闭</el-button>
        </div>
      </div>
    </el-dialog>
    <ChangePwd v-model="pwdVisible" @handleRefresh="handleRefresh" @handleCloseDialog="handlePwdCloseDialog" />
    <!-- <OrgSelect v-model="orgDialogData.orgDialogVisible" :data="orgDialogData" @update="handleGetCompanyId" @handleCloseComDialog="handleCloseComDialog" /> -->
  </div>
</template>

<script>

// import UploadAvatar from '@/components/uploadAvatarUrl/index'
// import OrgSelect from './orgSelect'
import ChangePwd from '@/components/changePwd/index'
import { updateUser, userRegister } from '@/api/baseInfo/authority/user'
import { findPlatforms } from '@/api/baseInfo/authority/resources'
import { showNotice } from '@/utils/toolclass'
import bus from '@/utils/bus'

export default {
  name: 'UserDialog',
  components: { ChangePwd },
  props: {
    isEdit: {
      type: Boolean
    },
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      id: null,
      checkAll: false,
      isIndeterminate: true,
      orgDialogData: {
        orgDialogVisible: false,
        companyId: null
      },
      userList: [],
      checkPass: '',
      userRole: [],
      check: [],
      rolelist: [],
      checkList: [],
      checkArr: [],
      pwdVisible: false,
      visible: false,
      url: require('@/assets/error.png'),
      formOrigin: {
        account: '',
        avatarUrl: '',
        email: '',
        id: 0,
        mobile: '',
        name: '',
        pwd: '',
        sysId: '',
        wxId: ''
      },
      form: { ...this.data },
      sysOptions: []
    }
  },
  computed: {},
  watch: {
    visible(v) {
      this.$emit('input', v)
    },
    value(v) {
      if (this.form.id === 0) {
        this.form = { ...this.formOrigin }
      }
      this.visible = v
    },
    data(v) {
      if (v.id === 0) {
        this.form = { ...this.formOrigin }
      } else {
        this.form = { ...v }
      }
      this.id = v.id
    }
  },
  mounted() {
    this.getSystems()
  },
  methods: {
    // 获取平台列表
    getSystems() {
      findPlatforms().then(res => {
        if (res.code === '000000') {
          // console.log(res)
          this.sysOptions = res.data
        }
      })
    },
    // 修改密码弹出
    handleChangePwd() {
      this.pwdVisible = true
    },

    // 查询机构弹窗
    handleSelectOrg() {
      this.orgDialogData = {
        orgDialogVisible: true,
        companyId: this.form.companyId
      }
    },
    // 机构信息更新回调
    handleGetCompanyId(row) {
      this.form.orgName = row.orgName
    },
    // 公司信息更新回调
    handleSelectUpdate(row) {
      this.form = {
        companyName: row.companyName,
        companyId: row.companyId
      }
      bus.$emit('companyId', row.companyId)
    },
    handleCheckAllChange(v) {
      this.form.roles = v ? this.checkList : []
      this.isIndeterminate = false
      // this.checkArr = this.checkList.map(item => item.id)
      // this.checkArr = this.form.roles.map(item => item.id)
      // this.check = v ? this.checkArr : []
      // this.isIndeterminate = false
      // if (v) {
      //   this.rolelist = this.checkArr.map(item => {
      //     this.roleIds = {
      //       id: item
      //     }
      //     return this.roleIds
      //   })
      // }
    },
    handleCheck(v) {
      // console.log(v)
      const checkedCount = v.length
      this.checkAll = checkedCount === this.form.roles.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.form.roles.length
      // this.rolelist = v.map(item => {
      //   this.roleId = {
      //     id: item
      //   }
      //   return this.roleId
      // })
      // const checkedCount = this.checkArr.length
      // this.checkAll = checkedCount === this.checkArr.length
      // this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkArr.length
    },
    handleUpdate(data) {
      updateUser(data).then(res => {
        if (res.code === '000000') {
          showNotice('success', '提示', '更新成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          // showNotice('error', '提示', res.msg)
        }
      })
    },

    handleSave(type) {
      // if (!(/^\S+$/.test(this.form.account))) {
      //   showNotice('error', '提示', '请输入账号')
      //   return
      // }
      // if (!(/^\S+$/.test(this.form.email))) {
      //   showNotice('error', '提示', '请输入邮箱号码')
      //   return
      // }
      // if (!(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.form.email))) {
      //   showNotice('error', '提示', '邮箱格式错误')
      //   return
      // }
      // if (!(/^\S+$/.test(this.form.mobile))) {
      //   showNotice('error', '提示', '请输入手机号码')
      //   return
      // }
      // if (!(/^1[3456789]\d{9}$/.test(this.form.mobile))) {
      //   showNotice('error', '提示', '手机号码格式错误')
      //   return
      // }
      // if (!(/^\S+$/.test(this.form.name))) {
      //   showNotice('error', '提示', '请输入用户名称')
      //   return
      // }
      // if (!(/^\S+$/.test(this.form.pwd))) {
      //   showNotice('error', '提示', '请输入密码')
      //   return
      // }
      // if (!(/^\S+$/.test(this.form.checkPass))) {
      //   showNotice('error', '提示', '请输入再次密码')
      //   return
      // }
      // if (this.form.pwd !== this.checkPass) {
      //   showNotice('error', '提示', '确认密码错误，请重新输入')
      //   return
      // }
      // if (!(/^\S+$/.test(this.form.sysId))) {
      //   showNotice('error', '提示', '请选择系统平台')
      //   return
      // }
      const params = {
        account: this.form.account,
        avatarUrl: this.form.avatarUrl,
        email: this.form.email,
        id: this.form.id,
        mobile: this.form.mobile,
        name: this.form.name,
        pwd: this.form.pwd,
        sysId: this.form.sysId,
        wxId: this.form.wxId
      }
      // console.log(params)
      if (type === 0) {
        this.handleCreateAdd(params)
      } else {
        this.handleUpdate(params)
      }
    },
    handleCreateAdd(data) {
      userRegister(data).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '添加成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
          this.form = []
        } else {
          // showNotice('error', '提示', res.msg)
        }
      })
    },
    handleCloseComDialog() {
      this.orgDialogData.orgDialogVisible = false
    },
    handlePwdCloseDialog() {
      this.pwdVisible = !this.pwdVisible
    },
    handleRefresh() {
      this.refresh = true
      setTimeout(() => {
        this.refresh = false
      }, 1200)
    },
    handleCloseDialog() {
      this.$emit('handleCloseDialog')
      this.$emit('handleRefresh')
    }
  }
}
</script>

<style lang="scss">

.userEdit {
  .user-page {
    width: 840px;
    margin-left: -200px;
    background: #ffffff;
    border: 1px solid #3CB371;
    .user-title {
      background: #3CB371;
      height: 46px;
      text-indent: 20px;
      .el-icon-close:before {
        width: 60px;
        margin-right: 20px;
      }
    }
    .user-main {
      justify-content: center;
      .changePass {
        // width: 120px;
      }
      .user-form {
        .user-input {
          width: 360px;
          margin-bottom: 20px;
          .name {
            width: 120px;
            font-size: 14px;
          }
          .form-input {
            width: 240px;
          }
          .orgName {
            width: 140px;
            font-size: 14px;
            margin-left: -60px;
          }
        }
      }
      .center-tree {
        .tree-grow {
          .tree-btn {}
          .sysTree {
            .left-tree {
              .el-tree-node .el-checkbox .el-checkbox__inner {
                display: block !important;
              }
            }
          }
          .coTree {
            width: 196px;
            height: 300px;
            overflow: auto;
          }
        }
      }
    }
    .user-check {
      .user-group {
        width: 680px;
        .user-checkbox {
          width: 140px;
          height: 40px;
        }
      }
    }
    .footerBtn {
      justify-content: center;
      .btn {
        width: 100px;
        height: 40px;
        font-size: 16px;
      }
      .el-icon-circle-check:before,
      .el-icon-circle-close:before {
        margin-right: 6px;
      }
    }
  }

}
</style>
